import React, { PureComponent,Fragment } from 'react';
import { formatMessage } from 'umi/locale';
import {Button, Drawer, Layout, message, Modal} from 'antd';
import Animate from 'rc-animate';
import { connect } from 'dva';
import ReactDataGrid from "react-data-grid";
import CompareData from './CompareData'
const { Header } = Layout;
import findIndex from 'lodash/findIndex'
import Detail from "@/pages/Pressure_sensors/Detail";
class HeaderView extends PureComponent {
  state = {
    visible: true,
    index:1,
    editRecord:{},
  };

  static getDerivedStateFromProps(props, state) {
    if (!props.autoHideHeader && !state.visible) {
      return {
        visible: true,
      };
    }
    return null;
  }

  componentDidMount() {
    //document.addEventListener('scroll', this.handScroll, { passive: true });
  }

  componentWillUnmount() {
   // document.removeEventListener('scroll', this.handScroll);
  }


  render() {
    const { compare_data,compare_data_modal } = this.props;
    console.log('compare_data',compare_data)
    const defaultColumnProperties = {

      resizable: true,
    };
    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        frozen:true,
        formatter: (event) => {

          return <p className={'index'}>{(event.value + 1)}</p>;
        },
      },
      {
        name: '消防栓编号',
        width: 120,
        frozen:true,
        key: 'number',
        formatter: (event) => {
          return <span style={{color:'blue',cursor:'pointer'}}
                       size="small"
                       onClick={(e) => {
                         this.setState({
                           editRecord: event.row,
                           infoModal: true,
                         });
                       }
                       }
          >{event.value}</span>;
        },
      },
      {
        name: '资产编号',
        width: 80,
        key: 'name',
        frozen:true,
      },
      {
        name: '地址',
        key: 'address',
        width: 310,
      },

      {
        name: '操作',
        width: 90,
        key: 'right',
        classname: 'operate',
        formatter: (event) => <Fragment>
          <Fragment>

            <Button
              type="danger"
              size="small"
              icon="delete"
              onClick={(e) => {

                const index=findIndex(compare_data,function (item,index){
                  return item.id===event.row.id
                })
                console.log('index',index)
                if(index>=0){
                  compare_data.splice(index, 1);
                  console.log('compare_data',compare_data)
                  const that=this;
                  this.props.dispatch({
                    type: 'global/changeOneProperty',
                    payload: {
                      compare_data:compare_data
                    },
                    callback:function (){
                      that.setState({index:that.state.index+1})
                    }
                  });
                }
              }
              }
            >删除
            </Button>

          </Fragment>
        </Fragment>,
      },
    ].map(c => ({ ...defaultColumnProperties, ...c }));
    console.log('compare_data3',compare_data)

    return (
      <div>
        <ReactDataGrid
          key={this.state.index}
          columns={columns}
          rowGetter={i => {
            return { ...compare_data[i], _index: i };
          }}
          rowsCount={compare_data.length}
          minHeight={(compare_data.length+1)*35}
        />
{/*         <Button type={'danger'} onClick={()=>{
          const {dispatch} = this.props;
          const that=this;
          dispatch({
            type: 'global/changeOneProperty',
            payload: {
              compare_data:[]
            },
            callback:function (){
              that.setState({index:that.state.index+1})
            }
          });
        }} block style={{marginTop:'16px'}}>清空对比</Button> */}
        <Button type={'primary'} onClick={()=>{
          const {dispatch} = this.props;
          if(compare_data.length<2){
            message.error('对比至少需要两个设备')
            return false
          }

          dispatch({
            type: 'global/changeOneProperty',
            payload: {
              compare_data_modal:true
            },
          });
        }} block style={{marginTop:'16px'}}>开始对比</Button>
        <Drawer
          title={`消防栓数据对比`}
          placement="right"
          destroyOnClose={true}
          onClose={() => {
            const {dispatch} = this.props;
            dispatch({
              type: 'global/changeOneProperty',
              payload: {
                compare_data_modal:false
              },
            });
          }}

          width={900}
          visible={compare_data_modal}
        >
          <CompareData/>
        </Drawer>
        <Drawer
          title={`${this.state.editRecord.number} 详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              infoModal: false,
              editRecord: {},
            });
          }}

          width={800}
          visible={this.state.infoModal}
        >
          <Detail editRecord={this.state.editRecord}
                  detailSaveCallback={()=>{
                    const {
                      pressure_sensors: { searchParams },
                    } = that.props;
                    that.handleSearch(searchParams);
                  }}
          ></Detail>
        </Drawer>
      </div>
    );
  }
}

export default connect(({ user, global, setting, loading }) => ({
  currentUser: user.currentUser,
  collapsed: global.collapsed,
  fetchingNotices: loading.effects['global/fetchNotices'],
  notices: global.notices,
  compare_data: global.compare_data,
  compare_data_modal: global.compare_data_modal,
  setting,
}))(HeaderView);
